<template>
    <a-checkable-tag
            v-for="item in options"
            :checked="value.indexOf(item.value) > -1"
            @change="(checked)=>handleChange(checked,item.value)"
            @dbclick=""
            closable
            >{{item.label}}
    </a-checkable-tag>
</template>

<script>
    export default {
        name: "ExCheckboxTag"
    }
</script>
<script setup>
    import { pull } from 'lodash'
    import { useVModels } from '@vueuse/core'
    const props = defineProps({
        value:Array,
        options:Array,
        disabled:Boolean,
    })
    const emit = defineEmits(['update:value','change'])
    const { value } = useVModels(props, emit)
    function handleChange(checked,label) {
        if(props.disabled){
          return
        }
        if(checked){
            value.value.push(label)
        }else{
            pull(value.value,label)
        }
        emit('change',value.value)
    }
</script>
<style scoped>

</style>